<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>会员分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>新增访客</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_new_users">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>活跃访客</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_active_users">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>总访客</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_total_users">-</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>新增会员</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_new_members">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>活跃会员</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_active_members">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>总会员</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_total_members">-</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>会话个数</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_sessions">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>总会话时长</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_sessions_length">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>平均会话时长</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="browser_avg_session_length">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

    <script type="text/javascript">
        Highcharts.setOptions({
            tooltip: {
                pointFormat: '{point.name}:<b>{point.percentage:0.01f}%</b>({point.y})'
            },
        });
        $(document).ready(function(){
            var url = COMMON_PREFIX_URL + "/stats/groupBy/browser?metric=total_users,active_users,new_users,sessions,sessions_length,active_members,new_members,total_members&platform=website&group_by=browser";
            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            url += "&start_date=" + sd + "&end_date=" + ed;
            $.get(url, {}, function(data){
                if (data.code == '200' && data.data.length > 0) {
                    var activeUsersSeries = {
                        name: '活跃访客',
                        data:[]
                    };
                    var newUsersSeries = {
                        name: '新访客',
                        data:[]
                    };
                    var totalUsersSeries = {
                        name: '总访客',
                        data:[]
                    };
                    var activeMembersSeries = {
                        name: '活跃会员',
                        data:[]
                    };
                    var newMembersSeries = {
                        name: '新增会员',
                        data:[]
                    };
                    var totalMembersSeries = {
                        name: '总会员',
                        data:[]
                    };
                    var sessionsSeries = {
                        name: "会话",
                        data: []
                    };
                    var sessionsLengthSeries = {
                        name: "总会话长度",
                        data: []
                    };
                    var avgSessionLengthSeries = {
                        name: "平均会话长度",
                        data: []
                    };
                    
                    $.each(data.data, function(i, item){
                        var browser = item["browser_name"];
                        var au = item["$active_users"];
                        var nu = item["$new_users"];
                        var tu = item["$total_users"];
                        var am = item["$active_members"];
                        var nm = item["$new_members"];
                        var tm = item["$total_members"];
                        var ss = item["$sessions"];
                        var sl = item["$sessions_length"];

                        addObject(activeUsersSeries["data"], [browser, au], au != 0);
                        addObject(newUsersSeries["data"], [browser, nu], nu != 0);
                        addObject(totalUsersSeries["data"], [browser, tu], tu != 0);

                        addObject(activeMembersSeries["data"], [browser, am], am != 0);
                        addObject(newMembersSeries["data"], [browser, nm], nm != 0);
                        addObject(totalMembersSeries["data"], [browser, tm], tm != 0);

                        addObject(sessionsSeries["data"], [browser, ss], ss != 0);
                        addObject(sessionsLengthSeries["data"], [browser, sl], sl != 0);
                        if (ss != 0) {
                            var asl = Number((sl / ss).toFixed(2));
                            addObject(avgSessionLengthSeries["data"], [browser, asl], asl != 0);
                        }
                    });

                    showPie("browser_active_users", activeUsersSeries);
                    showPie("browser_new_users", newUsersSeries);
                    showPie("browser_total_users", totalUsersSeries);

                    showPie("browser_active_members", activeMembersSeries);
                    showPie("browser_new_members", newMembersSeries);
                    showPie("browser_total_members", totalMembersSeries);

                    showPie("browser_sessions", sessionsSeries);
                    showPie("browser_sessions_length", sessionsLengthSeries);
                    showPie("browser_avg_session_length", avgSessionLengthSeries);
                } else {
                    // 
                }
            }, "json");
        });

        function addObject(arr, obj, flag) {
            if (flag) {
                arr.push(obj);
            }
        }

        function showPie(id, series) {
            if (series && series["data"] && series["data"].length > 0) {
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: id,
                        type: 'pie'
                    },
                    series: []
                });
                chart.addSeries(series);
            }
        }
    </script>
</body>
</html>